<style>
    #febs-apex-line .layui-card-header {
        font-weight: 600;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-apex-line" lay-title="线性图表">
    <div class="layui-row layui-col-space8 febs-container">
      <!--  <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">基本折线图</div>
                <div class="layui-card-body">
                    <div id="basicLineChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">带标签的折线图</div>
                <div class="layui-card-body">
                    <div id="lineChartDatalabels"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">可缩放的折线图</div>
                <div class="layui-card-body">
                    <div id="lineChartZoomable"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">带标注的折线图</div>
                <div class="layui-card-body">
                    <div id="lineChartAnnotations"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">同步折线图</div>
                <div class="layui-card-body">
                    <div id="syncingChart1"></div>
                    <div id="syncingChart2"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">台阶折线图</div>
                <div class="layui-card-body">
                    <div id="stepLineChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">渐变折线图</div>
                <div class="layui-card-body">
                    <div id="gradientLineChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">非连续性折线图</div>
                <div class="layui-card-body">
                    <div id="missNullChart"></div>
                </div>
            </div>
        </div>-->
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">虚线折线图</div>
                <div class="layui-card-body">
                    <div id="main" style="width: 600px;height:400px;"></div>
                </div>
            </div>
        </div>
        <!--<div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">实时折线图</div>
                <div class="layui-card-body">
                    <div id="realTimeChart"></div>
                </div>
            </div>
        </div>-->
    </div>
</div>
<script data-th-src="@{febs/lay/extends/echarts.min.js}"></script>
<script data-th-src="@{febs/lay/data/dataSeries.js}"></script>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['apexcharts', 'febs'], function () {
        var febs = layui.febs;
        var $ = layui.jquery;



        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        function func(x) {
            x /= 10;
            return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
        }

        function generateData() {
            let data = [];
            for (let i = 0; i <= 200; i += 0.1) {
                data.push([i, func(i)]);
            }
     /*       $.ajax({
                type:"get",
                url:"febs/views/affect/listData",
                success:function (d) {
                    data = d;
                }
            });*/
        console.log(data);

            return data;
        }

       var option = {
               animation: false,
               grid: {
                   top: 40,
                   left: 50,
                   right: 40,
                   bottom: 50
               },
               xAxis: {
                   name: 'x',
                   minorTick: {
                       show: true
                   },
                   splitLine: {
                       lineStyle: {
                           color: '#999'
                       }
                   },
                   minorSplitLine: {
                       show: true,
                       lineStyle: {
                           color: '#ddd'
                       }
                   }
               },
               yAxis: {
                   name: 'y',
                   min: -100,
                   max: 100,
                   minorTick: {
                       show: true
                   },
                   splitLine: {
                       lineStyle: {
                           color: '#999'
                       }
                   },
                   minorSplitLine: {
                       show: true,
                       lineStyle: {
                           color: '#ddd'
                       }
                   }
               },
               dataZoom: [{
                   show: true,
                   type: 'inside',
                   filterMode: 'none',
                   xAxisIndex: [0],
                   startValue: -20,
                   endValue: 20
               }, {
                   show: true,
                   type: 'inside',
                   filterMode: 'none',
                   yAxisIndex: [0],
                   startValue: -20,
                   endValue: 20
               }],
               series: [
                   {
                       type: 'line',
                       showSymbol: false,
                       clip: true,
                       data: generateData()
                   }
               ]
       };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);




        var interval = setInterval(function () {
            var urlHash = window.location.hash;
            if (urlHash.indexOf('apex/line') !== -1) {
                getNewSeries(lastDate, {
                    min: 10,
                    max: 90
                });
                realTimeChart.updateSeries([{
                    data: data
                }]);
            }
        }, 1000);

        febs.routeLeave(function (route, nextPath, next) {
            clearInterval(interval);
            next();
        })
    });
</script>